<template>
  <div class="WaterAnalysis">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="付费统计" name="1">
        <el-card>
          <div class="searchBox">
            <h3><span class="tt"></span> 金币付费统计</h3>
            <div>
              <el-radio-group v-model="type" size="small" fill="#7b94d8">
                <el-radio-button label="1">今日</el-radio-button>
                <el-radio-button label="2">总计</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <el-row class="cardRow" :gutter="20">
            <el-col :span="4">
              <div class="card">
                <h3>
                  <span class="point"></span>
                  付费金额
                </h3>
                <h1>
                  <i class="iconfont">&#xe703;</i>
                  300
                </h1>
                <div class="line"></div>
                <div class="foot">
                  <div class="left">
                    环比
                    <i class="el-icon-caret-top"></i>
                    10
                  </div>
                  <div class="right">
                    同比
                    <i class="el-icon-caret-bottom">10</i>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="card">
                <h3>
                  <span class="point"></span>
                  付费人数
                </h3>
                <h1>
                  <i class="iconfont">&#xe741;</i>
                  300
                </h1>
                <div class="line"></div>
                <div class="foot">
                  <div class="left">
                    环比
                    <i class="el-icon-caret-top"></i>
                    10
                  </div>
                  <div class="right">
                    同比
                    <i class="el-icon-caret-bottom">10</i>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="card">
                <h3>
                  <span class="point"></span>
                  付费率
                </h3>
                <h1>
                  <i class="iconfont">&#xe6f9;</i>
                  300
                </h1>
                <div class="line"></div>
                <div class="foot">
                  <div class="left">
                    环比
                    <i class="el-icon-caret-top"></i>
                    10
                  </div>
                  <div class="right">
                    同比
                    <i class="el-icon-caret-bottom">10</i>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="card">
                <h3>
                  <span class="point"></span>
                  点击充值人数
                </h3>
                <h1>
                  <i class="iconfont">&#xe74b;</i>
                  300
                </h1>
                <div class="line"></div>
                <div class="foot">
                  <div class="left">
                    环比
                    <i class="el-icon-caret-top"></i>
                    10
                  </div>
                  <div class="right">
                    同比
                    <i class="el-icon-caret-bottom">10</i>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="card">
                <h3>
                  <span class="point"></span>
                  点击充值次数
                </h3>
                <h1>
                  <i class="iconfont">&#xe75b;</i>
                  300
                </h1>
                <div class="line"></div>
                <div class="foot">
                  <div class="left">
                    环比
                    <i class="el-icon-caret-top"></i>
                    10
                  </div>
                  <div class="right">
                    同比
                    <i class="el-icon-caret-bottom"></i>
                    10
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="card">
                <h3>
                  <span class="point"></span>
                  充值率
                </h3>
                <h1>
                  <i class="iconfont">&#xe6f9;</i>
                  300
                </h1>
                <div class="line"></div>
                <div class="foot">
                  <div class="left">
                    环比
                    <i class="el-icon-caret-top"></i>
                    10
                  </div>
                  <div class="right">
                    同比
                    <i class="el-icon-caret-bottom"></i>
                    10
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <!-- 付费统计详情 -->
        <el-card style="margin-top: 20px">
          <div class="searchBox">
            <h3>
              <div class="tt"></div>
              付费统计详情
            </h3>
            <div class="right">
              <span class="txt">渠道：</span>
              <el-select
                class="channelselect"
                v-model="channel"
                placeholder="请选择渠道"
                size="small"
              >
                <el-option
                  v-for="item in channelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span class="txt" style="margin-left: 10px">时间：</span>
              <el-date-picker
                size="small"
                v-model="timeArr"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="timeOptions"
                value-format="yyyy-MM-dd"
                @change="focus"
              >
              </el-date-picker>
              <el-button class="btn" icon="el-icon-search" size="small"
                >查询搜索</el-button
              >
              <el-button icon="el-icon-paperclip" size="small"
                >导出EXCEL</el-button
              >
            </div>
          </div>
          <el-table
            :data="tableData"
            style="width: 100%; margin-top: 10px"
            :header-cell-style="{ background: '#f5f7fa' }"
          >
            <template slot="empty">
              <el-empty :image-size="200"></el-empty>
            </template>
            <el-table-column prop="date" label="日期"> </el-table-column>
            <el-table-column prop="name" label="付费金额"> </el-table-column>
            <el-table-column prop="address" label="付费人数"> </el-table-column>
            <el-table-column prop="address" label="点击充值人数">
            </el-table-column>
            <el-table-column prop="address" label="点击充值次数">
            </el-table-column>
            <!-- <el-table-column prop="address" label="点击充值率">
            </el-table-column> -->
            <el-table-column prop="address" label="充值率"> </el-table-column>
            <el-table-column prop="address" label="付费率"> </el-table-column>
          </el-table>
          <pagination
            :total="total"
            :page.sync="page"
            :limit.sync="pageSize"
            @pagination="getList"
          />
        </el-card>
        <!-- 首次付费人数 -->
        <el-card style="margin-top: 20px">
          <div class="searchBox">
            <h3>
              <div class="tt"></div>
              首次付费人数
            </h3>
            <div class="right">
              <span class="txt">渠道：</span>
              <el-select
                class="channelselect"
                v-model="channel"
                placeholder="请选择渠道"
                size="small"
              >
                <el-option
                  v-for="item in channelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span class="txt" style="margin-left: 10px">时间：</span>
              <el-date-picker
                size="small"
                v-model="timeArr1"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="timeOptions"
                value-format="yyyy-MM-dd"
                @change="focusA"
              >
              </el-date-picker>
              <el-button class="btn" icon="el-icon-search" size="small"
                >查询搜索</el-button
              >
              <el-button icon="el-icon-paperclip" size="small"
                >导出EXCEL</el-button
              >
            </div>
          </div>
          <el-table
            :data="tableData1"
            style="width: 100%; margin-top: 10px"
            :header-cell-style="{ background: '#f5f7fa' }"
          >
            <template slot="empty">
              <el-empty :image-size="200"></el-empty>
            </template>
            <el-table-column prop="date" label="时间"> </el-table-column>
            <el-table-column prop="name" label="当日"> </el-table-column>
            <el-table-column prop="address" label="次日"> </el-table-column>
            <el-table-column prop="address" label="3日"> </el-table-column>
            <el-table-column prop="address" label="4日"> </el-table-column>
            <el-table-column prop="address" label="5日"> </el-table-column>
            <el-table-column prop="address" label="6日"> </el-table-column>
            <el-table-column prop="address" label="7日"> </el-table-column>
            <el-table-column prop="address" label="15日"> </el-table-column>
            <el-table-column prop="address" label="30日"> </el-table-column>
            <el-table-column prop="address" label="30日后"> </el-table-column>
          </el-table>
          <pagination
            :total="total1"
            :page.sync="page1"
            :limit.sync="pageSize1"
            @pagination="getList1"
          />
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="提现统计" name="2">
        <el-card>
          <div class="searchBox">
            <h3><span class="tt"></span> 提现统计</h3>
            <!-- <div>
              <el-radio-group v-model="type" size="small" fill="#7b94d8">
                <el-radio-button label="1">今日</el-radio-button>
                <el-radio-button label="2">总计</el-radio-button>
              </el-radio-group>
            </div> -->
          </div>
          <el-row class="cardRow" :gutter="20">
            <el-col :span="6">
              <div class="card">
                <h3>
                  <span class="point"></span>
                  提现金额
                </h3>
                <h1>
                  <i class="iconfont">&#xe703;</i>
                  300
                </h1>
                <div class="line"></div>
                <div class="foot">
                  <div class="left">
                    环比
                    <i class="el-icon-caret-top"></i>
                    10
                  </div>
                  <div class="right">
                    同比
                    <i class="el-icon-caret-bottom">10</i>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card">
                <h3>
                  <span class="point"></span>
                  提现人数
                </h3>
                <h1>
                  <i class="iconfont">&#xe741;</i>
                  300
                </h1>
                <div class="line"></div>
                <div class="foot">
                  <div class="left">
                    环比
                    <i class="el-icon-caret-top"></i>
                    10
                  </div>
                  <div class="right">
                    同比
                    <i class="el-icon-caret-bottom">10</i>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card">
                <h3>
                  <span class="point"></span>
                  提现率
                </h3>
                <h1>
                  <i class="iconfont">&#xe6f9;</i>
                  300
                </h1>
                <div class="line"></div>
                <div class="foot">
                  <div class="left">
                    环比
                    <i class="el-icon-caret-top"></i>
                    10
                  </div>
                  <div class="right">
                    同比
                    <i class="el-icon-caret-bottom">10</i>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card">
                <h3>
                  <span class="point"></span>
                  首提人数
                </h3>
                <h1>
                  <i class="iconfont">&#xe74b;</i>
                  300
                </h1>
                <div class="line"></div>
                <div class="foot">
                  <div class="left">
                    环比
                    <i class="el-icon-caret-top"></i>
                    10
                  </div>
                  <div class="right">
                    同比
                    <i class="el-icon-caret-bottom">10</i>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <div class="typeBox"></div>
        <el-card>
          <div class="searchBox">
            <div>
              <el-radio-group v-model="type1" size="small" fill="#7b94d8">
                <el-radio-button label="1">安卓</el-radio-button>
                <el-radio-button label="2">IOS</el-radio-button>
              </el-radio-group>
            </div>
            <div class="right">
              <span class="txt">渠道：</span>
              <el-select
                class="channelselect"
                v-model="channel2"
                placeholder="请选择渠道"
                size="small"
              >
                <el-option
                  v-for="item in channelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span class="txt" style="margin-left: 10px">时间：</span>
              <el-date-picker
                size="small"
                v-model="timeArr2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="timeOptions"
                value-format="yyyy-MM-dd"
                @change="focusB"
              >
              </el-date-picker>
              <el-button class="btn" icon="el-icon-search" size="small"
                >查询搜索</el-button
              >
              <el-button icon="el-icon-paperclip" size="small"
                >导出EXCEL</el-button
              >
            </div>
          </div>
          <!-- <div class="chart">
            <div id="echarts" style="width: 100%; height: 100%"></div>
          </div> -->
          <el-table
            :data="tableData2"
            style="width: 100%; margin-top: 10px"
            :header-cell-style="{ background: '#f5f7fa' }"
          >
            <template slot="empty">
              <el-empty :image-size="200"></el-empty>
            </template>
            <el-table-column prop="date" label="渠道"> </el-table-column>
            <el-table-column prop="name" label="日期"> </el-table-column>
            <el-table-column prop="address" label="提现金额"> </el-table-column>
            <el-table-column prop="address" label="提现人数"> </el-table-column>
            <el-table-column prop="address" label="提现率"> </el-table-column>
          </el-table>
          <pagination
            :total="total2"
            :page.sync="page2"
            :limit.sync="pageSize2"
            @pagination="getList2"
          />
        </el-card>
        <el-card style="margin-top: 20px">
          <div class="searchBox">
            <h3>
              <div class="tt"></div>
              提现统计详情
            </h3>
            <div class="right">
              <span class="txt">渠道：</span>
              <el-select
                class="channelselect"
                v-model="channel3"
                placeholder="请选择渠道"
                size="small"
              >
                <el-option
                  v-for="item in channelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span class="txt" style="margin-left: 10px">时间：</span>
              <el-date-picker
                size="small"
                v-model="timeArr3"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="timeOptions"
                value-format="yyyy-MM-dd"
                @change="focusC"
              >
              </el-date-picker>
              <el-button class="btn" icon="el-icon-search" size="small"
                >查询搜索</el-button
              >
              <el-button icon="el-icon-paperclip" size="small"
                >导出EXCEL</el-button
              >
            </div>
          </div>
          <el-table
            :data="tableData3"
            style="width: 100%; margin-top: 10px"
            :header-cell-style="{ background: '#f5f7fa' }"
          >
            <template slot="empty">
              <el-empty :image-size="200"></el-empty>
            </template>
            <el-table-column prop="date" label="时间"> </el-table-column>
            <el-table-column prop="name" label="总金额（宝石）">
            </el-table-column>
            <el-table-column prop="address" label="人数"> </el-table-column>
            <el-table-column prop="address" label="提现率"> </el-table-column>
          </el-table>
          <pagination
            :total="total3"
            :page.sync="page3"
            :limit.sync="pageSize3"
            @pagination="getList3"
          />
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  data() {
    return {
      type: "1",
      channel: "",
      timeArr: [],
      startTime: "",
      endTime: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      //首次付费人数
      channel1: "",
      timeArr1: [],
      startTime1: "",
      endTime1: "",
      tableData1: [],
      total1: 0,
      page1: 1,
      pageSize1: 10,
      //提现统计
      type1: "1",
      channel2: "",
      timeArr2: [],
      startTime2: "",
      endTime2: "",
      tableData2: [],
      total2: 0,
      page2: 1,
      pageSize2: 10,
      // myChart: null,
      channel3: "",
      timeArr3: [],
      startTime3: "",
      endTime3: "",
      tableData3: [],
      total3: 0,
      page3: 1,
      pageSize3: 10,
      //通用
      activeName: "1",
      channelOptions: [],
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    focus() {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startTime = this.timeArrA[0];
      this.endTime = this.timeArrA[1];
    },
    focusA() {
      if (!this.timeArr1) {
        this.timeArr1 = [];
      }
      this.startTime1 = this.timeArrA1[0];
      this.endTime1 = this.timeArrA1[1];
    },
    focusB() {
      if (!this.timeArr2) {
        this.timeArr2 = [];
      }
      this.startTime2 = this.timeArrA2[0];
      this.endTime2 = this.timeArrA2[1];
    },
    focusC() {
      if (!this.timeArr3) {
        this.timeArr3 = [];
      }
      this.startTime3 = this.timeArrA3[0];
      this.endTime3 = this.timeArrA3[1];
    },
    getList() {},
    getList1() {},
    getList2() {},
    getList3() {},
    //配置chart
    // setMyChart() {
    //   console.log("set");
    //   var colors = ["#7b94d8", "#91CC75", "#EE6666"];
    //   this.myChart.setOption({
    //     color: colors,
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "cross",
    //       },
    //     },
    //     grid: {
    //       right: "20%",
    //     },
    //     legend: {
    //       data: ["金额", "人数"],
    //     },
    //     xAxis: {
    //       type: "category",
    //       axisTick: {
    //         alignWithLabel: true,
    //       },
    //       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    //     },
    //     yAxis: [
    //       {
    //         type: "value",
    //         name: "金额",
    //         min: 0,
    //         position: "right",
    //         axisLine: {
    //           show: true,
    //           lineStyle: {
    //             color: colors[0],
    //           },
    //         },
    //         axisLabel: {
    //           formatter: "{value} ",
    //         },
    //       },
    //       {
    //         type: "value",
    //         name: "人数",
    //         min: 0,
    //         position: "right",
    //         offset: 80,
    //         axisLine: {
    //           show: true,
    //           lineStyle: {
    //             color: colors[1],
    //           },
    //         },
    //         axisLabel: {
    //           formatter: "{value} ",
    //         },
    //       },
    //     ],
    //     series: [
    //       {
    //         name: "金额",
    //         data: [820, 932, 901, 934, 1290, 1330, 1320],
    //         type: "line",
    //         smooth: true,
    //       },
    //       {
    //         name: "人数",
    //         data: [82, 93, 91, 934, 120, 130, 120],
    //         yAxisIndex: 1,
    //         type: "line",
    //         smooth: true,
    //       },
    //     ],
    //   });
    // },
    getData() {
      switch (this.activeName) {
        case "1":
          //用户活跃

          break;
        case "2":
          // this.$nextTick(() => {
          //   if (!this.myChart) {
          //     this.myChart = this.$echarts.init(
          //       document.getElementById("echarts")
          //     );
          //   }
          //   this.setMyChart();
          // });
          break;
      }
    },
  },
  mounted() {
    this.getData();
  },
  watch: {
    activeName() {
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
.WaterAnalysis {
  padding: 20px;
  //通用
  .searchBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      margin: 0;
      display: flex;
      align-items: center;
      .tt {
        display: inline-block;
        width: 5px;
        height: 18px;
        margin-right: 5px;
        background-color: #7b94d8;
      }
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
  .txt {
    display: inline-block;
    height: 32px;
    background-color: #f5f7fa;
    line-height: 32px;
    padding-left: 10px;
    color: #9d9399;
    border-radius: 4px 0 0 4px;
    border: 1px solid #dcdfe6;
    border-right: none;
  }
  /deep/ .el-input__inner {
    border-radius: 0 4px 4px 0 !important;
  }
  .sexselect {
    width: 100px;
    margin: 0 10px 0 0;
  }
  //模块
  .cardRow {
    margin-top: 20px;
    .card {
      height: 150px;
      border: 2px solid #ebeff8;
      border-radius: 5px;
      h3 {
        display: flex;
        align-items: center;
        padding-left: 10px;
        .point {
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 5px solid #7b94d8;
          margin-right: 10px;
        }
      }
      h1 {
        margin: 0px 0;
        text-align: right;
        padding-right: 20px;
        i {
          color: #7b94d8;
        }
      }
      .line {
        margin-top: 10px;
        border-top: 2px solid #ebeff8;
      }
      .foot {
        padding: 10px 20px 0;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // .left{

        // }
      }
    }
  }
  .typeBox {
    padding: 20px 0;
  }
  .chart {
    width: 100%;
    height: 400px;
  }
}
</style>